<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>证书透明度 - 光速大佬</title>
    <link rel="apple-touch-icon" sizes="76x76" href="https://q1.qlogo.cn/g?b=qq&nk=3272943566&s=640">
    <link rel="icon" type="image/png" href="https://q1.qlogo.cn/g?b=qq&nk=3272943566&s=640">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <meta name="description" content="光速大佬的 SSL 证书透明度报告">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
        integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw" crossorigin="anonymous" />
    <style>
        .item-title {
            color: rgba(0, 0, 0, .54);
        }

        .main-card {
            margin: 30px auto;
            max-width: 800px;
        }

        .t-c-success {
            color: #66BB6A;
        }

        .t-c-error {
            color: #F44336;
        }

        .t-c-warning {
            color: #FFB74D;
        }

        footer a,
        footer span {
            color: rgba(0, 0, 0, .6);
        }
    </style>
</head>

<body class="mdui-appbar-with-toolbar mdui-theme-primary-teal">
    <div class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-theme">
            <a href="javascript:;" class="mdui-typo-title">证书透明</a>
            <div class="mdui-toolbar-spacer"></div>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#appbar-menu'}"><i
                    class="mdui-icon material-icons">more_vert</i></a>
            <ul class="mdui-menu" id="appbar-menu">
                <!-- <li class="mdui-menu-item">
                    <a href="javascript:about();" class="mdui-ripple">关于「证书透明」</a>
                </li>
                <li class="mdui-divider"></li> -->
                <li class="mdui-menu-item">
                    <a href="https://www.guangsudalao.top" class="mdui-ripple">个人主页</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- <h1 class="ui center aligned header">
        <i id="icon" class="expeditedssl icon" data-position="left center" style="color: #009688;"></i>SSL Status
    </h1> -->
    <div class="main-card">
        <div class="mdui-panel" id="result" mdui-panel>
            <div id="result-spinner" class="mdui-spinner mdui-spinner-colorful mdui-center"></div>
        </div>
    </div>
    <footer class="mdui-text-center">
        <span><a href="https://www.guangsudalao.top">光速大佬</a><span><br>
        <span><a href="https://blog.mcxiaolan.top/articles/Check-your-SSL.html">搭建教程</a><span>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
        integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
        crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script>
        $("#nowYear").text(new Date().getFullYear());
        var ctJson = "./ct.json?" + new Date().getTime() + Math.random();
        // function about() {
        //     mdui.alert(`
            
        //     `, '关于「证书透明」', function () {

        //     }, {
        //         confirmText: "关闭",
        //     })
        // }
        $.getJSON(ctJson, function (data) {
            $("#result-spinner").remove();
            $.each(data, function (index, value) {
                $("#result").append(`
                    <div class="i-card mdui-panel-item">
                        <div class="mdui-panel-item-header">
                            <div class="mdui-panel-item-title">${value.domain}</div>
                            <div class="mdui-panel-item-summary t-c-${value.statuscolor}">${value.status}</div>
                            <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                        </div>
                        <div class="mdui-panel-item-body">
                            <p><span class="item-title">最后检查</span> &nbsp;&nbsp;${value.check}</p>

                            <p><span class="item-title">证书详情</span> &nbsp;&nbsp;${value.subject}</p>
                            
                            <p><span class="item-title">开始时间</span> &nbsp;&nbsp;${value.start}</p>

                            <p><span class="item-title">到期时间</span> &nbsp;&nbsp;${value.expire}</p>

                            <p><span class="item-title">剩余</span> &nbsp;&nbsp;${value.remain} 天</p>

                            <p><span class="item-title">颁发机构</span> &nbsp;&nbsp;${value.issuer}</p>

                        </div>
                    </div>
                `);
            });
        });
    </script>
</body>

</html>
